<template>
    <div class="main">
        <n-layout>
            <!-- 顶部导航 -->
            <n-layout-header bordered>
                <n-space justify="space-between" align="center" class="header-content">
                    <n-h2 style="margin: 0;color: #fff;">宏通</n-h2>
                </n-space>
            </n-layout-header>

            <!-- 登录主体 -->
            <n-layout-content>
                <n-grid cols="24" x-gap="12" responsive="screen" style="overflow: hidden;" class="login-container">
                    <n-gi :span="6" :md="{ span: 12, offset: 6 }" :xs="24">
                        <n-card
                            style="width: 30%;min-width: 350px; position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);"
                            hoverable> <n-tabs class="card-tabs" default-value="signin" size="large" animated
                                pane-wrapper-style="margin: 0 -4px" :on-update:value="tabChange"
                                pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"> <n-tab-pane
                                    name="signin" tab="登录"> <n-form ref="loginForm" :model="formValue" :rules="rules">
                                        <n-form-item-row label="邮箱" path="email">
                                            <n-input v-model:value="formValue.email" placeholder="请输入邮箱" />
                                        </n-form-item-row> <n-form-item-row label="密码" path="password"> <n-input
                                                type="password" v-model:value="formValue.password"
                                                placeholder="请输入密码" /> </n-form-item-row>
                                    </n-form> <n-button type="primary" @click="submitForm" block secondary strong> 登录
                                    </n-button>
                                </n-tab-pane> <n-tab-pane name="signup" tab="注册"> <n-form ref="registerForm"
                                        :model="formValue" :rules="registerRules"> <n-form-item-row label="邮箱"
                                            path="email">
                                            <n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
                                        </n-form-item-row> <n-form-item-row label="密码" path="password"> <n-input
                                                type="password" placeholder="请输入密码"
                                                v-model:value="formValue.password" />
                                        </n-form-item-row> <n-form-item-row label="重复密码" path="repeatPassword"> <n-input
                                                type="password" v-model:value="formValue.repeatPassword"
                                                placeholder="请输入重复密码" />
                                        </n-form-item-row>
                                    </n-form> <n-button type="primary" @click="Iregister" block secondary strong> 注册
                                    </n-button>
                                </n-tab-pane> </n-tabs> </n-card>
                    </n-gi>
                </n-grid>
            </n-layout-content>
        </n-layout>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { resetAble } from '@/utils/reset';
import { register, login } from "@/api/login"
import { createDiscreteApi } from "naive-ui";
const { message } = createDiscreteApi(["message"]);
// 表单数据
const { data: formValue, reset } = resetAble({
    email: '',
    password: '',
    repeatPassword: ''
}) as any
const tabChange = (_val: any) => {
    reset()
}
// 验证规则
const rules = {
    email: {
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
    },
    password: {
        required: true,
        message: '请输入密码',
        trigger: ['blur', 'input']
    }
}

// 新增注册表单规则
const registerRules = {
    ...rules,
    repeatPassword: {
        required: true,
        validator(_rule: any, value: any) {
            return new Promise<void>((resolve, reject) => {
                if (!value) {
                    reject(new Error('请再次输入密码'))
                } else if (value !== formValue.value.password) {
                    reject(new Error('两次输入的密码不一致'))
                } else {
                    resolve()
                }
            })
        },
        trigger: ['blur', 'input']
    }
}

// 新增表单引用
const loginForm = ref<FormInst | null>(null)
import type { FormInst } from 'naive-ui'
import router from '@/router';
import storage from '@/utils/storage';
const registerForm = ref<FormInst | null>(null)
const submitting = ref(false)
// 修改后的提交方法
const submitForm = async () => {
    submitting.value = true
    try {
        await loginForm.value?.validate()
        login(formValue.value).then((res: any) => {
            if (res.code == 200) {
                message.success('登录成功')
                let data = res.data;
                storage.set('token', data.token);
                storage.set('userinfo', data.userinfo);
                storage.set('id', data.userinfo._id);
                router.push({
                    path: '/layout',
                })
            }

        }).catch(() => {

        })


    } catch (errors) {
        message.error('请正确填写表单')
    } finally {
        submitting.value = false
    }
}

// 修改后的注册方法
const Iregister = async () => {
    try {
        await registerForm.value?.validate()
        register(formValue.value).then((res: any) => {
            if (res.code == 200) {
                // 验证通过后执行注册逻辑
                message.success('注册成功')
            } else {
                message.error(res.message);
            }
        }).catch((err) => {
            message.error(err.message)
        })
    } catch (errors) {
        message.error('请正确填写注册信息')
    }
}

</script>

<style scoped>
.main {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

}

.header-content {
    height: 64px;
    padding: 0 24px;
    background-color: #2d8cf0;
    color: white;
    overflow: hidden;
}

.login-container {
    height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: url('../assets/b.jpg') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    box-sizing: border-box;
}
</style>